<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8" />
		<title>登录后台</title>
		<style>
			html {
				background: #EBEBEB;
				height: 100%;
				font-size: 13px;
			}
			strong {
				color: #f00;
			}
			form,p{
				margin: 0;
			}
			body {
				position: relative;
				margin: 0;
				background: #008EAD;
				height: 60%;
				margin: 0;
			}
			
			body>header {
				padding-top: 100px;
			}
			
			body>section {
				position: absolute;
				bottom: -100px;
				left: 0;
				right: 0;
				box-sizing: border-box;
				width: 400px;
				margin-left: auto;
				margin-right: auto;
				z-index: 1;
			}
			
			body>footer {
				text-align: center;
				position: fixed;
				bottom: 10px;
				left: 0;
				right: 0;
				line-height: 30px;
			}
			
			body>header>h1 {
				margin: 0;
				color: #fff;
				font-size: 500%;
				text-align: center;
			}
			.message-box {
				line-height: 30px;
			}
			.form-box {
				background: white;
				text-align: center;
				border-radius: 2px;
			}
			
			input.icoTip {
				border: 1px solid #D3D3D3;
				border-radius: 5px;
				padding: 10px 0px 10px 30px;
				background-repeat: no-repeat;
				width: 100%;
				box-sizing: border-box;
				background-position: 5px center;
			}
			
			input.icoTip:focus {
				border-color: #3333FF;
				outline: 0;
			}
			
			
			.ico-account {
				background-image: url();
			}
			
			.ico-password {
				background-image: url();
			}
			
			.form-fields {
				margin: 15px;;
				padding-left:15px;
				padding-right:15px;
			}
			.form-action {
				border-top: 1px solid #E7E7E7;
				padding: 10px 15px;
				display: table;
				width: 100%;
				box-sizing: border-box;
				vertical-align: middle;
			}
			.form-fields>p {
				margin-top: 0;
				margin-bottom: 15px;
			}
			.form-action>:first-child {
				display: table-cell;
				text-align: left;
			}
			
			.form-action>:last-child {
				display: table-cell;
				text-align: right;
			}
			
			button[type=submit] {
				background: #008EAD;
				border: 1px solid #008EaF;
				color: #fff;
				border-radius: 5px;
				font-weight: bold;
				padding: 10px 15px;
				cursor: pointer;
			}
			button[type=submit]:hover{
				background: #694530;
			}
			
		</style>

		<style>
			.eagel-box {
				text-align: center;
				position: relative;
				bottom: -100px;
				z-index: -1;
			}
			.sprt-eagle {
				background-image: url(http://localhost/img/sprt_eagle.png);
				background-repeat: no-repeat;
				display: inline-block;
				vertical-align: bottom;
				position: relative;
			}
			
			.sprt-eagle.head {
				height: 91px;
				width: 97px;
				background-position: -30px 0px;
				z-index: 100;
			}
			.sprt-eagle.hand-left {
				height: 20px;
				width: 30px;
				background-position: 0px -71px;
				left: -30px;
				z-index: 200;
			}
			.sprt-eagle.hand-left.hiding {
				height: 20px;
				background-position: 0px -37px;
			}
			.sprt-eagle.hand-left.hided {
				height: 37px;
				background-position: 0px 0px;
			}
			.sprt-eagle.hand-right {
				height: 20px;
				width: 30px;
				background-position: 0px -71px;
				left: 30px;
				z-index: 200;
			}
			.sprt-eagle.hand-right.hiding {
				height: 20px;
				background-position: -127px -37px;
			}
			.sprt-eagle.hand-right.hided {
				height: 37px;
				background-position: -127px 0px;
			}
		</style>
	</head>

	<body>
		<header>
			<h1>超市订单管理系统</h1>
		</header>
		<section>
			<div class="eagel-box">
				<i class="sprt-eagle hand-left"></i>
				<i class="sprt-eagle head"></i>
				<i class="sprt-eagle hand-right"></i>
			</div>
			<div class="form-box">
<br>
				<p class="message-box">
					<strong>[[${msg}]]</strong>
				</p>

				<form action="/userController/login" method="post">
					<div class="form-fields">
						<p>
							<input class="icoTip ico-account" type="text" name="name" placeholder="账号">
						</p>
						<p>
							<input class="icoTip ico-password" name="password" type="password" placeholder="密码">
						</p>
					</div>
					<div class="form-action">
						<span>
						<a href="/userController/toRegister">没有账号？</a>
					</span>
						<span>
						<button type="submit" href="#">登陆</button>
					</span>
					</div>
				</form>
			</div>
		</section>

		<footer>
			&copy;BugGoAway 2019-2021 All Rights Reservered.
		</footer>
	</body>
	<script th:src="@{/js/jquery-3.6.0.js}"></script>
	<script>
		
		var eagleLeftHandEL=$(".hand-left");
		var eagleRightHandEL=$(".hand-right");
		var eagleHandHidedStatus=[{left:45,bottom:6},{left:-45,bottom:6}];
		$("input[type=password]").focus(function(){
			eagleLeftHandEL.animate(eagleHandHidedStatus[0],{
				step:hidingStep,
				duration:500
			});
			eagleRightHandEL.animate(eagleHandHidedStatus[1],{
				step:hidingStep,
				duration:500,
				complete:function(){
					setTimeout(eaglePeek,1000);
				}
			});
		}).blur(function(){
			//立即结束动画
			eagleRightHandEL.stop(true,true);
			eagleLeftHandEL.stop(true,true);
			
			
			eagleLeftHandEL[0].hideStatus=0;
			eagleLeftHandEL[0].className="sprt-eagle hand-left";
			eagleLeftHandEL[0].style="";
			
			eagleRightHandEL[0].hideStatus=0;
			eagleRightHandEL[0].className="sprt-eagle hand-right";
			eagleRightHandEL[0].style="";
			
		});
		var eagleShow=function(){
			$(".eagel-box").animate({
				bottom:-6
			},1000,function(){
				this.style.zIndex=100;
			});
		};
		/**
		 * the hiding step control
		 * @param {Object} now
		 * @param {Object} fx
		 */
		var hidingStep=function(now,fx){
			if(fx.prop==="bottom"){
				now=Math.floor(now);
				if(now===3&&this.hideStatus!==1){
					this.classList.add("hiding");
					this.hideStatus=1;
				}else if(now===5&&this.hideStatus!==2){
					this.classList.remove("hiding");
					this.classList.add("hided");
					this.hideStatus=2;
				}
			}
		};
		/**
		 * the eagel peak
		 */
		var eaglePeek=function(){
			if(eagleRightHandEL[0].hideStatus===2){
				eagleRightHandEL.animate({
					bottom:3,
					left:-25
				},300,function(){
					setTimeout(function(){
						if(eagleRightHandEL[0].hideStatus===2){
							eagleRightHandEL.animate(eagleHandHidedStatus[1],200);
						}
					},500);
				});
			}
		};
		eagleShow();
	</script>

</html>